<template>
  <div class="reservations_billing_container">
    <div class="customer_container">
      <div class="grey_title_container">
        <span class="indicator"></span>
        <span class="text">客户信息</span>
      </div>
      <div class="customer_content_container form_container">
        <el-row style="display: flex; align-items: center;" :gutter="17">
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">姓名:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">电话:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">年龄:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">性别:</span>
            </div>
            <el-select v-model="selectedSex" placeholder="请选择" size="small">
              <el-option
                v-for="item in sexArr"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">会员等级:</span>
            </div>
            <el-select v-model="selectedLevel" placeholder="请选择" size="small">
              <el-option
                v-for="item in vipLevels"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px;" :gutter="17">
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="text">身份证号:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="text">推荐人:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="text">彼此关系:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container four_text_width">
              <span class="text">科室分诊:</span>
            </div>
            <el-select v-model="selectedDept" placeholder="请选择" size="small">
              <el-option
                v-for="item in depts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="5" class="item" style="justify-content: flex-end;">
            <el-select v-model="selectedDoc" placeholder="请选择" size="small" style="width: 100%;">
              <el-option
                v-for="item in docs"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px;" :gutter="17">
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">预约时间:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="require">*</span>
              <span class="text">预约金额:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 17px;" :gutter="17">
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
              <span class="text">意向项目:</span>
            </div>
            <span class="title_text">
              · 一级产品
            </span>
          </el-col>
          <el-col :span="4" class="item">
            <span class="title_text">
              · 二级产品
            </span>
          </el-col>
          <el-col :span="4" class="item">
            <span class="title_text">
              · 三级产品
            </span>
          </el-col>
          <el-col :span="10" class="item">
            <span class="title_text">
              备注
            </span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 12px;" :gutter="17">
          <el-col :span="4" class="item">
            <div class="text_container four_text_width">
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="10" class="item">
            <el-input size="mini"></el-input>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="selected_products_container">
      <div class="grey_title_container table_title">
        <div class="left">
          <span class="indicator"></span>
          <span class="text">已选产品</span>
        </div>
        <div class="right">
          <el-button size="small" type="primary" plain>导入</el-button>
          <el-button size="small" type="danger" plain>删除</el-button>
        </div>
      </div>
      <div class="table_container">
        <el-table
          :data="products"
          :span-method="calProductSpan"
          :border="true">
          <el-table-column
            type="selection"
            fixed
            width="35">
          </el-table-column>
          <el-table-column
            label="产品名称"
            align="center">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.type === 1">
                  <span class="cell">{{scope.row.productName}}</span>
                </div>
                <div v-if="scope.row.type === 0">
                  <span class="cell">备注</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="二级类型"
            align="center"
            prop="secondType">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.type === 1">
                  <span class="cell">{{scope.row.secondType}}</span>
                </div>
                <div v-if="scope.row.type === 0">
                  <span class="cell">{{scope.row.memo}}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="三级类型"
            align="center"
            prop="thirdType"/>
          <el-table-column
            label="产品类型"
            align="center"
            prop="productType"/>
          <el-table-column
            label="原价"
            align="center"
            prop="oldPrice"/>
          <el-table-column
            label="数量"
            align="center"
            prop="count"/>
          <el-table-column
            label="最终价格"
            align="center"
            prop="finalPrice"/>
        </el-table>
      </div>
    </div>
    <div class="operator_container">
      <el-button type="primary" style="padding-left: 45px; padding-right: 45px; margin-right: 15px;">保存</el-button>
      <el-button type="success" style="padding-left: 45px; padding-right: 45px; margin-left: 15px;">提交收银</el-button>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component
  export default class ReservationsBilling extends Vue {
    sexArr = [{value: '1', label: '男'}, {value: '2', label: '女'}];
    vipLevels = [{value: '1', label: '金牌'}, {value: '2', label: '银牌'}];
    depts = [{value: '1', label: '整容科'}, {value: '2', label: '美容科'}];
    docs = [{value: '1', label: '黎可'}, {value: '2', label: '孙越'}];
    selectedSex = '';
    selectedLevel = '';
    selectedDept = '';
    selectedDoc = '';
    products = [{
      productName: '麻醉费',
      secondType: '美肤祛斑',
      thirdType: '美肤祛斑',
      productType: '产品',
      oldPrice: 29800.00,
      count: 2,
      finalPrice: 29800.00,
      type: 1
    }, {
      memo: '赠送两次超声逆龄提拉两次，第一次手数时间预计八月十二日',
      type: 0
    }];

    calProductSpan({row, column, rowIndex, columnIndex}) {
      if (row.type === 0) {
        if (columnIndex === 1) {
          return [1, 2];
        } else if (columnIndex === 2) {
          return [1, 6];
        } else {
          return [0, 0];
        }
      }
    }
  }
</script>

<style scoped>
  .customer_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .customer_content_container {
    padding: 15px 9px 15px 9px;
  }

  .table_title {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .operator_container {
    margin-top: 29px;
    text-align: center;
  }
</style>
